<template>
  <el-button
    class="back-btn cancel-btn-style"
    type="info"
    size="small"
    style="margin-right: 6px; height: 32px;"
    @click="handleBack"
  >{{ text }}</el-button>
</template>
<script>
export default {
  name: 'BackBtn',
  props: {
    detailData: {
      type: Object,
      default: () => {
        return {};
      }
    },
    text: {
      type: String,
      default: '返回'
    },
    toList: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      timer: null
    };
  },
  computed: {
    isLeaveConfirm() {
      if (!('status' in this.detailData) || 'process' in this.detailData && (this.detailData.process === 0 || this.detailData.process === 1)) {
        return false;
      } else {
        return true;
      }
    }
  },
  beforeDestroy() {
    if (this.timer) {
      clearTimeout(this.timer);
    }
  },
  methods: {
    handleBack() {
      if (!this.isLeaveConfirm) {
        this.$confirm('付款申请没有创建成功，退出后内容不会保存', '', {
          confirmButtonText: '确认',
          cancelButtonText: '再想想',
          center: true,
          type: 'warning',
          customClass: 'del-message del-message-cancel',
          iconClass: 'del-icon'
        }).then(() => {
          this.back();
        }).catch(() => {
          // this.back();
        });
      } else {
        this.back();
      }
    },
    back() {
      if (this.toList) {
        this.$router.push({
          name: 'supplier'
        });
      } else {
        this.$router.go(-1);
        this.timer = setTimeout(() => {
          this.$router.push({
            name: 'supplier'
          });
        }, 500);
      }
    }
  }
};
</script>
<style lang="scss" scoped>

</style>
